<!-- 员工库 详情 -->
<template>
	<a-modal v-bind="options" title="详情">
		<a-descriptions>
			<template #title>
				<div class="d-module-title">
					<b class="employee">员工信息</b>
					<a-tag :color="staffPoolStatusData[record.detailsData?.status]?.color">{{ staffPoolStatusData[record.detailsData?.status]?.name }}</a-tag>
				</div>
			</template>
			<a-descriptions-item label="姓名">{{ record.detailsData?.employeeName }}</a-descriptions-item>
			<a-descriptions-item label="电话">{{ record.detailsData?.phone }}</a-descriptions-item>
			<a-descriptions-item :label="`${certificationTypeName}号码`">{{ record.detailsData?.identityCard }}</a-descriptions-item>
			<a-descriptions-item label="联系人性别">{{ record.detailsData?.gender === 1 ? '男' : '女' }}</a-descriptions-item>
			<a-descriptions-item label="签约类型">
				{{ record.detailsData?.contractType === 1 ? '企业合同-员工' : record.detailsData?.contractType === 2 ? '协议框架-员工' : '--' }}
			</a-descriptions-item>
			<a-descriptions-item label="劳动合同有效期">{{ record.detailsData?.laborContractBeginTime }} ~ {{ record.detailsData?.laborContractEndTime }}</a-descriptions-item>
		</a-descriptions>

		<a-descriptions title="企业信息" class="ant-descriptions-blockquote">
			<a-descriptions-item label="所属企业">{{ record.detailsData?.enterPriseName }}</a-descriptions-item>
			<a-descriptions-item label="社会信用统一代码">{{ record.detailsData?.societyCode }}</a-descriptions-item>
			<a-descriptions-item label="联系人姓名">{{ record.detailsData?.linkmanName }}</a-descriptions-item>
			<a-descriptions-item label="联系人手机号">{{ record.detailsData?.linkmanPhone }}</a-descriptions-item>
		</a-descriptions>
		<a-descriptions title="附件" class="ant-descriptions-blockquote">
			<a-descriptions-item label="在职证明">
				<!--  :files="detail.attachmentDtos"  -->
				<a @click="record.upload = true">预览/下载</a>
			</a-descriptions-item>
		</a-descriptions>

		<a-descriptions v-if="record.detailsData?.status !== 1" class="ant-descriptions-blockquote">
			<template #title>
				<b>{{ record.detailsData?.status === 2 ? '搬离信息' : '入住信息' }}</b>
				<a class="check-in-record" type="primary" @click="checkInF" v-if=" record.detailsData?.contractType == 1||!record.detailsData?.contractType">入住记录</a>
			</template>
			<a-descriptions-item label="所属项目">{{ record.detailsData?.itemName }}</a-descriptions-item>
			<a-descriptions-item label="房源类型">{{ houseTypeData[record.detailsData?.houseType] }}</a-descriptions-item>
			<a-descriptions-item label="房源地址">{{ record.detailsData?.houseAddress }}</a-descriptions-item>
			<a-descriptions-item label="入住周期">{{ record.detailsData?.checkInBeginTime }} - {{ record.detailsData?.checkInEndTime }}</a-descriptions-item>
			<a-descriptions-item label="租金">
				{{ record.detailsData?.charterMoney ? record.detailsData?.charterMoney.toFixed(2) : '' }}
			</a-descriptions-item>
			<a-descriptions-item v-if="record.detailsData?.status === 2" label="搬离时间">{{ record.detailsData?.checkOutDate }}</a-descriptions-item>
			<a-descriptions-item v-if="record.detailsData?.status === 3" label="入住时间">{{ record.detailsData?.checkInDate }}</a-descriptions-item>
		</a-descriptions>

		<a-descriptions title="其他信息" class="ant-descriptions-blockquote">
			<a-descriptions-item label="录入人">{{ record.detailsData?.createName }}</a-descriptions-item>
			<a-descriptions-item label="录入时间">{{ record.detailsData?.createDataTime }}</a-descriptions-item>
		</a-descriptions>

		<template #footer>
			<div v-if="record.detailsData?.status !== 3">
				<a-button type="primary" v-if="hasPermissions(['mk_contract_enterprise_staff_bj'])" @click="handler(1)">编辑</a-button>
				<a-button type="primary" v-if="hasPermissions(['mk_contract_enterprise_staff_blrz'])" @click="handler(2)">办理入住</a-button>
			</div>
			<a-button type="primary" v-else-if="hasPermissions(['mk_contract_enterprise_staff_bl']) && record.detailsData?.contractType !== 2" @click="handler(3)">搬离</a-button>
		</template>
	</a-modal>

	<!-- 回显附件 -->
	<file-upload-dialog v-model:visible="record.upload" :biz-id="props.id" :isDetails="true" />

	<!-- 添加/编辑员工 -->
	<addEmployee v-model:visible="record.isShowAddEmployee" @close="close" :id="props.id"></addEmployee>

	<!-- 个人入住 -->
	<staff-check-in v-model:visible="record.batchCheckIn" :type="1" :id="record.id" @close="getStaffDetails" />

	<!-- 搬离 -->
	<!-- <remove-house v-model:visible="record.removeHouseShow" :id="record.id" @success="getStaffDetails" /> -->
	<move-out-dialog v-model:visible="record.removeHouseShow" :id="record.id" @success="getStaffDetails" />

	<!-- 入住记录 -->
	<check-in-record v-model:visible="record.isCheckIn" :employeeId="record.employeeId"></check-in-record>
</template>

<script setup lang="ts">
	import {computed, reactive, ref, toRef, watch} from 'vue'
	import {staffDetails, checkInRecordsF} from '@/api/staff-pool'
	import FileUploadDialog from '@/components/common/file-upload-dialog.vue'
	import {staffPoolStatusData} from '@/constant/enterprise-customers'
	import StaffCheckIn from '@/components/contract/enterprise-customer-management/staff-check-in.vue'
	import RemoveHouse from '@/components/contract/enterprise-customer-management/remove-house.vue'
	import CheckInRecord from '@/components/contract/enterprise-customer-management/check-in-record.vue'
	import {useStore} from '@/store'
	import moveOutDialog from '@/components/contract/contract-detail-dialog/charter-contract/move-out.vue'
	const hasPermissions = useStore().hasPermissions

	const emits = defineEmits(['update:visible', 'close', 'refurbish'])
	const props = defineProps<{
		visible: boolean
		id: string
	}>()
	const record = reactive<any>({
		detailsData: {},
		upload: false,
		isShowAddEmployee: false,
		batchCheckIn: false,
		removeHouseShow: false,
		isCheckIn: false,
		employeeId: null
	})

	const certificationTypeOptions = [
		{value: 1, label: '身份证'},
		{value: 2, label: '护照'},
		{value: 3, label: '港澳通行证'},
		{value: 4, label: '台湾同胞证'},
		{value: 5, label: '军官证'},
		{value: 6, label: '其他证件'}
	]

	const certificationTypeName = computed(() => {
		const {certificationType} = record?.detailsData || {}
		const {label} = certificationTypeOptions.find(v => v.value === certificationType) || {}
		return label || ''
	})

	const houseTypeData = {
		1: '整租',
		2: '合租',
		3: '集中'
	}
	const options = reactive({
		width: 1200,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		},
		onOk() {
			console.log(1)
		}
	})
	const getStaffDetails = () => {
		staffDetails(props.id).then(res => {
			record.detailsData = res.data
		})
	}
	watch(
		() => props.visible,
		newVal => {
			if (newVal && props.id) {
				getStaffDetails()
			}
		}
	)

	const handler = (field: number) => {
		switch (field) {
			case 1:
				emits('update:visible', false)
				record.isShowAddEmployee = true
				break
			case 2:
				record.id = record.detailsData.id
				record.batchCheckIn = true
				break
			case 3:
				record.id = record.detailsData.id
				record.removeHouseShow = true
				break
		}
	}
	const close = () => {
		emits('update:visible', false)
		emits('close')
		emits('refurbish')
	}

	const checkInF = () => {
		record.employeeId = record.detailsData.employeeId
		record.isCheckIn = true
	}
</script>

<style lang="less" scoped>
	.employee {
		margin-right: 10px;
	}
	.check-in-record {
		margin-left: 10px;
		font-size: 12px;
		padding: 2px 5px;
	}
</style>
